<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
  <head>
    <meta name="apple-mobile-web-app-capable" content="no" />
    <meta name="viewport" content="user-scalable=no" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      
      #wrapper {
        position:relative;
        width:800px;
        margin:0 auto;
      }
      
      #output {
        position:relative;
        width:100%;
        height:96px;
        border:1px solid black;
      }
      
      .keyboard {
        position:relative;
        width:100%;
        height:250px;
        border:1px solid black;
        background-color:#ccc;
        cursor:pointer;
      }
      
      .keyboard ul {
        list-style-type:none;
      }
      
      .keyboard ul ul {
        clear:both;
      }
      
      .keyboard ul ul li {
        float:left;
        position:relative;
        width:70px;
        height:70px;
        margin:1px;
        border:1px outset gray;
        text-align:center;
        line-height:70px;
        background-color:#ddd;
        -moz-border-radius:5px;
        border-radius:5px;
      }
      
      .keyboard .swypable {
        background-color:#eee;
      }
      
      .keyboard ul ul li:hover {
        background-color:white;
      }
      
      .keyboard .middle {
        margin-left:20px;
      }
      .keyboard .lower {
        margin-left:50px;
      }      
      
    </style>
    
    <script>
      
      function init() {
        initkeyboard('keyboard');
      }
      
      function isIOS() {
        var agent = navigator.userAgent.toLowerCase();
        return agent.match(/(iphone|ipod|ipad)/);
      }
      
      function initkeyboard(name) {
        var el = document.getElementById(name);
        el.swyping = false;
        el.keybuffer = '';
        
        if (isIOS()) {
          el.ontouchstart = touchmovehandler;
          el.ontouchmove = touchmovehandler;
          el.ontouchend = mouseuphandler;
        } else {
          el.onmousedown = mousedownhandler;
          el.onmouseover = mouseoverhandler;
          el.onmouseup = mouseuphandler;
        }
      }
      
      function touchmovehandler(e) {
        var e = window.event || e;
        var target = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
        if (target.className=='swypable') this.keybuffer += target.textContent;
        return true;
      }
      
      function mousedownhandler(e) {
        var e = window.event || e;
        if (e.target.className=='swypable') this.keybuffer += e.target.textContent;
        this.swyping = true;
        return false;
      }
      
      function mouseuphandler(e) {
        this.swyping = false;
        var el = document.getElementById('output');
        el.src = 'swypeserver.php?lang=en&text=' + this.keybuffer;
        this.keybuffer = '';
      }
      
      function mouseoverhandler(e) {
        var e = window.event || e;
        if (!this.swyping) return;
        if (e.target.className=='swypable') this.keybuffer += e.target.textContent;
      }
      

      
    </script>
  </head>
  
  <body ontouchmove='event.preventDefault();' onload='init();'>
    <div id='wrapper'>
      <h1>Simple SWYPE demo</h1>
      <p>english dictionary - QWERTY keyboard</p>
      <p>Swype using your mouse: clickleft -> hold -> swype -> release</p>
      <p>or use your iOS device</p>
      <p>tested with Safari and Firefox both on OSX and Safari on iOS</p>
      <iframe id='output' height=40></iframe>
      <div id='keyboard' class='keyboard'>
        <ul>
          <li class='upper'>
            <ul>
              <li class='swypable'>q</li><li class='swypable'>w</li><li class='swypable'>e</li><li class='swypable'>r</li><li class='swypable'>t</li><li class='swypable'>y</li><li class='swypable'>u</li><li class='swypable'>i</li><li class='swypable'>o</li><li class='swypable'>p</li>
            </ul>
          </li>
          <li class='middle'>
            <ul>
              <li class='swypable'>a</li><li class='swypable'>s</li><li class='swypable'>d</li><li class='swypable'>f</li><li class='swypable'>g</li><li class='swypable'>h</li><li class='swypable'>j</li><li class='swypable'>k</li><li class='swypable'>l</li>
            </ul>
          </li>
          <li class='lower'>
            <ul>
              <li class='swypable'>z</li><li class='swypable'>x</li><li class='swypable'>c</li><li class='swypable'>v</li><li class='swypable'>b</li><li class='swypable'>n</li><li class='swypable'>m</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>  
  </body>
</html>